<template>
	<div class="content">
		<div class="conttitle">
			<div style="height: 100%;">
				<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
				<div style="margin-top: 20px;" class="phone">622*********0909</div>
			</div>
			<div style="margin-top: 20px;" class="mor" @click='change'>
				<div style="" class="name"><img src="@/static/cut.png" alt="" style="width: 20px;height: 20px;"></div>
				<div style="" class="phone">切换就诊人</div>
			</div>
		</div>
		<div class="balance">
			<div>卡内余额</div>
			<div>¥60.00</div>
		</div>
		<div class="h1">待缴费项目</div>
		<div class="cart">
			<div>
				<div class="godname">西药费</div>
				<div class="godhospname">神经内科 刘美</div>
				<div class="godhospname">2020-06-15 11:05</div>
			</div>
			<div style="text-align: right;">
				<div class="money">¥60.00</div>
				<div class="gomove" @click="gopay">去缴费</div>
			</div>
		</div>
		<div class="cart">
			<div>
				<div class="godname">检验费</div>
				<div class="godhospname">神经内科 刘美</div>
				<div class="godhospname">2020-06-15 11:05</div>
			</div>
			<div style="text-align: right;">
				<div class="money">¥60.00</div>
				<div class="gomove">去缴费</div>
			</div>
		</div>
		<div class="cart">
			<div>
				<div class="godname">检查费</div>
				<div class="godhospname">神经内科 刘美</div>
				<div class="godhospname">2020-06-15 11:05</div>
			</div>
			<div style="text-align: right;">
				<div class="money">¥60.00</div>
				<div class="gomove">去缴费</div>
			</div>
		</div>
		<view style="width: 100%;height: 250px;position: fixed;background-color: #ffffff;margin-left: -15px;bottom: -250px;z-index: 889;" :animation="animationData">
			<div style="position: absolute; top: 7%;right: 10%;"><img src="@/static/icon-close.png" alt="" style="width: 15px;height: 15px;" @click='close'></div>
			<div style="width: 100%;text-align: center;font-size: 17px;margin-top: 10px;">选择就诊人</div>
			<div style="display: flex;padding: 20px;align-items: center;border-bottom: 1px solid #f2f2f2;">
				<div style="height: 100%;width: 100%;" @click='close'>
					<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
					<div style="margin-top: 20px;" class="phone">622*********0909</div>
				</div>
				<div style="margin-top: 20px;" class="mor">
					<div style="" class="name"><img src="@/static/addmore.png" alt="" style="width: 10px;height: 10px;"></div>
				</div>
			</div>
			<div style="display: flex;padding: 20px;align-items: center;border-bottom: 1px solid #f2f2f2;">
				<div style="height: 100%;width: 100%;"  @click='close'>
					<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
					<div style="margin-top: 20px;" class="phone">622*********0909</div>
				</div>
				<div style="margin-top: 20px;" class="mor">
					<div style="" class="name"><img src="@/static/addmore.png" alt="" style="width: 10px;height: 10px;"></div>
				</div>
			</div>
		</view>
			<div style="width: 100%;padding: 100%;position: fixed;background-color: #666666;z-index: 888;top: 0;margin-left: -15px;opacity: .5;" v-show="show" @click='disnone'></div>
	</div>
</template>

<script>
		export default{
			data(){
				return{
					animationData: {},
					show:false
				}
			},methods:{
				close(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(0).step()
					
					    this.animationData = animation.export()
						this.show=false
				},
				gopay(){
					uni.navigateTo({
						url:"./gopay"
					})
				},change(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(-251).step()
					
					    this.animationData = animation.export()
						this.show=true
				},disnone(){
					var animation = uni.createAnimation({
					  duration: 1000,
					    timingFunction: 'ease',
					})
										
					this.animation = animation
										
					animation.translateY(-1).step()
										
					this.animationData = animation.export()
					this.show=false
				}
			}
		}
</script>
	
<style>
	
	.money{
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		    font-weight: 500;
		    font-style: normal;
		    font-size: 17px;
		    color: #F46363;
	}
	.gomove{
		margin-top: 10px;
		border-radius: 5px;
		width: 72px;
		    height: 32px;
			font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    color: #FFFFFF;
			    line-height: 20px;
				background-color: #006EFF;
				font-size: 14px;
				line-height: 32px;
				text-align: center;
	}
	.godname{
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
			margin: 5px 0;
	}
	.godhospname{
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    color: #AAAAAA;
						margin: 5px 0;
			
	}
	.cart{
		margin-bottom: 20px;
		padding: 0px 15px;
		border: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
	}
	.choose{
		display: flex;
	}
	.zoi {
		flex: 1;
		background-color: #f2f2f2;
		color: #5c5c5c;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
		border-radius: 10px;
	}
	.zoif {
		flex: 1;
		background-color: #e3efff;
		color: #0e75ff;
		border: 1px solid #006eff;
		border-radius: 10px;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
	}
	.h1 {
		margin: 20px 0px;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		    font-weight: 500;
		    font-style: normal;
		    font-size: 17px;	
	}
	.balance div:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.balance div:nth-child(2){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 18px;
		    color: #555555;
	}
	.balance{
		padding: 0 15px;
		margin-top: 10px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #f2f2f2;
		background-color: #ffffff;
	}
	.mor {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
			text-align: center;
		    font-size: 12px;
	}
	.phone {
		margin-top: 10px;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    color: #AAAAAA;
	}
	.name span:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.name span:nth-child(2) {
		margin-left: 5px;
		font-size: 12px;
		display: inline-block;
		width: 44px;
		height: 18px;
		padding: 2px;
		background-color: #e2edfe;
		text-align: center;
		line-height: 18px;
		border-radius: 10px;
		letter-spacing: 1px;
		color: #006EFF;
	}
	.conttitle{
		background-color: #f5f9ff;
		height: 80px;
		display: flex;
		font-weight: 200;
		border: 1px solid #f2f2f2;
		padding: 20px 15px;
		justify-content: space-between;
		margin-top: 15px;
	}
	.content {
		padding: 30px 15px;
	}
</style>